<!DOCTYPE html>
<html>
<head>
	<base href="http://www.w3school.com.cn">
	<title>JavaScript 学习</title>

	<style type="text/css">
		div{
			border: 1px solid black;
			/*border-style:solid;*/
			margin-top: 10px;
		}
	</style>

</head>
<body>
	
	<script 

		<!-- JavaScript: 写入 HTML 输出 -->
		document.write("<h1>This is a heading</h1>");
		document.write("<p>This is a paragraph</p>");

		// JavaScript： 对事件作出反应
		function showMessage() {
			alert("Welcome!");
		}

		// JavaScript：改变 HTML 内容
		function changeText(){
			var newP = document.getElementById("demo");
			// 改变内容
			newP.innerHTML = "Hello JavaScript";

			// 改变样式
			newP.style.color = "#ff0000";
		}

		// JavaScript：改变 HTML 图像
		function changeImage(){
			element = document.getElementById('myimage');
			if (element.src.match("bulbon")) {
				element.src = "/i/eg_bulboff.gif";
			}else{
				element.src = "/i/eg_bulbon.gif";
			}
		}

		// JavaScript：验证输入
		function inputFun(){
			var x = document.getElementById("textDemo").value;
			// isNaN() 用于判断是否是数字
			if (x == "" || isNaN(x)) {
				alert("Not Numeric");
			}
		}

	</script>

	<button type="button" onclick="showMessage()">提示</button>

	<p id="demo">JavaScript 改变内容</p>
	<button type="button" onclick="changeText()">改变内容</button>

	<br>
	<img id="myimage" src="/i/eg_bulboff.gif" onclick="changeImage()">
	<p>点击灯泡来点亮或熄灭这盏灯。</p>

	<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
	<input id="textDemo" type="text">
	<button type="button" onclick="inputFun()">点击这里</button>

	<script type="text/javascript">
		// " \ " 后面不能有空格
		document.write("Hello \
			World!");	

	</script>

	<script type="text/javascript" src="file:///Users/mac/Desktop/HTML/JavaScript/firstJs.js"></script>

	<div>
		
		<p><strong>JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。</strong></p>
		<p><strong>在 JavaScript 中，对象是拥有属性和方法的数据。</strong></p>
		<hr>
		<br>
		<h6>错误处理</h6>
		<p>Please input a number between 5 and 10:</p>
		<input type="text" id="error">
		<button type="button" onclick="errorDispose()">Test Input</button>
		<p id="mess"></p>
		
	</div>

	<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
		姓：<input type="text" name="fname">
		<input type="submit" value="提交">	
	</form>

</body>
</html>
